<% if available_view_types.count > 1 %>
  <%
    info = {
      table: {
        new_view_type: 'table',
        new_icon: "avo/table-view-type",
        translation_key: 'avo.table_view',
      },
      grid: {
        new_view_type: 'grid',
        new_icon: "avo/grid-view-type",
        translation_key: 'avo.grid_view',
      },
      list: {
        new_view_type: 'list',
        new_icon: 'queue-list',
      },
      map: {
        new_view_type: 'map',
        new_icon: "avo/map-view-type",
        translation_key: 'avo.map_view',
      },
    }
  %>
  <div class="flex">
    <div class="button-group">
      <% available_view_types.each do |type| %>
        <% is_active_view = view_type.to_s == type.to_s %>

        <%= a_link url_for(params.permit!.merge(view_type: type)).to_s,
          icon: info[type][:new_icon],
          color: is_active_view ? :primary : :gray,
          rounded: false,
          size: :sm,
          class: is_active_view ? "z-20" : "bg-gray-100 border-gray-300",
          title: t('avo.switch_to_view', view_type: type),
          data: {
            tippy: 'tooltip',
            'turbo-frame': turbo_frame,
            control: "view-type-toggle-#{type}"
          }
        %>
      <% end %>
    </div>
  </div>
<% end %>
